<template>
  <div class="login-component">
    <div class="qr-switch qr" @click="$router.push({ name: 'LoginForQr' })" />
    <div class="login-tab">
      <div class="login-tab-item active">账号登录</div>
      <div class="login-tab-item" @click="$router.push({ name: 'LoginForCode' })">验证码登录</div>
    </div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      class="form-content"
      auto-complete="on"
      label-position="left"
    >
      <el-form-item prop="cellphone">
        <div class="icon-container img-box">
          <img src="../../assets/images/login-phone.png" alt="">
        </div>
        <el-input
          v-model.trim="form.cellphone"
          placeholder="账号"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item
        prop="password"
        class="pwd-input"
      >
        <div class="icon-container img-box">
          <img src="../../assets/images/login-lock.png" alt="">
        </div>
        <el-input
          v-model="form.password"
          type="password"
          placeholder="密码"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      <div class="keep-login">
        <el-checkbox v-model="autoLogin">保持登录状态</el-checkbox>
      </div>
      <el-button
        :loading="loading"
        size="default"
        type="primary"
        style="width: 100%;"
        @click.native.prevent="handleLogin"
      >登录</el-button>
      <div class="login-tool">
        <span class="forgot-button" @click="forgotPwd">忘记密码?</span>
        <span class="register-button" @click="forgotPwd">注册>></span>
      </div>

    </el-form>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'
export default {
  name: 'LoginForAccount',
  components: {},
  mixins: [],
  props: {},
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码需大于6位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        cellphone: '',
        password: ''
      },
      autoLogin: false,
      rules: {
        cellphone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      redirect: undefined
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleLogin() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.form).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 忘记密码
    forgotPwd() {
      this.$router.push({
        name: 'ResetPwd'
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../element-variables.scss";
.login-component {
}
</style>
